<template lang="pug">
.user-manage-add
  el-dialog(title="添加用户" v-model="dialogVisible" @close="handleClose" custom-class="dialog-width")
    el-scrollbar.scrollbar-dialog-wrap

      el-form(:model="state.form" ref="valiForm" :rules='state.forms' label-width="90px").form-width
        el-form-item(label="用户名:" prop='userName')
          el-input(v-model="state.form.userName" placeholder='用户名').form-input
        el-form-item(label="密码:" prop='passWord')
          el-input(v-model="state.form.passWord" placeholder='密码').form-input
        el-form-item(label="角色:" prop='roleName')
          el-select(v-model="state.form.roleName" placeholder="选择角色").form-input
            el-option(label="运营" value="1")
            el-option(label="前端" value="2")
            el-option(label="后端" value="3")
        el-form-item(label="部门:" prop='department')
          el-select(v-model="state.form.department" placeholder="选择部门").form-input
            el-option(label="销售部" value="1")
            el-option(label="媒介部" value="2")
            el-option(label="财务部" value="3")
            el-option(label="运营部" value="4")
            el-option(label="渠道部" value="5")
            el-option(label="小红书渠道部" value="6")

        el-form-item
          el-button(@click="formSubmit('valiForm')" type="primary" size="small" :lodading="loading") 确定
          el-button(@click="handleClose" type="danger" size="small") 取消
</template>

<script setup>
import { ref, reactive, getCurrentInstance, watch, defineProps, defineEmit } from 'vue'

const { proxy } = getCurrentInstance()
const emit = defineEmit(['closeFun', 'update:isDialog'])
const props = defineProps({
  isDialog: {
    required: true
  }
})

const state = reactive({
  form: {
    userName: '',
    passWord: '',
    roleName: '',
    department: ''
  },
  forms: {
    userName: [{ required: true, message: '用户名', trigger: 'blur' }],
    passWord: [{ required: true, message: '密码', trigger: 'blur' }],
    roleName: [{ required: true, message: '角色', trigger: 'blur' }],
    department: [{ required: true, message: '部门', trigger: 'blur' }]
  }
})
const valiForm = ref()
const dialogVisible = ref(false)
const loading = ref(false)

// 侦听
watch(() => [props.isDialog], ([newDialog, oldDialog]) => {
  if (!newDialog) return

  for (const key in state.form) {
    state.form[key] = ''
  }
  dialogVisible.value = newDialog
}, { immediate: true })

// 表达提交
function formSubmit (form) {
  valiForm.value.validate((valid) => {
    if (valid) {
      loading.value = true
      proxy.$message({ type: 'success', message: '提交成功' })
      emit('closeFun')
      handleClose()
    } else {
      return false
    }
  })
}

// 关闭弹窗
function handleClose () {
  emit('update:isDialog', false)
  dialogVisible.value = false
}
</script>
<style rel="stylesheet/scss" lang="scss">
</style>
